<template>
  <div class="ui-chart-quota-item" :class="['is-' + size, 'is-' + type]">
    <span class="ui-chart-quota-item__icon" v-if="icon">
      <ui-icon :name="icon" size="24px"></ui-icon>
    </span>
    <div class="ui-chart-quota-item__main">
      <div class="ui-chart-quota-item__target">
        <span class="ui-chart-quota-item__value">{{value}}</span>
        <span class="ui-chart-quota-item__unit">{{unit}}</span>
      </div>
      <div class="ui-chart-quota-item__label">{{label}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UiChartQuotaItem',
  props: {
    label: {
      type: String
    },
    value: {
      type: [String, Number]
    },
    icon: {
      type: String
    },
    unit: {
      type: String
    },
    size: {
      type: String,
      default: 'large',
      validator(value) {
        return ['large', 'small'].includes(value)
      }
    },
    type: {
      type: String,
      default: 'default'
    }
  }
}
</script>
<style lang="less">
.ui-chart-quota-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 1.5em;
  &.is-right {
    text-align: right;
  }
}
.ui-chart-quota-item__icon{
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  margin-right: 16px;
  text-align: center;
  line-height: 24px;
}
.ui-chart-quota-item__label {
  color: #666;
}
.ui-chart-quota-item{
  &.is-primary {
    .ui-chart-quota-item__target {
      color: #007BFF;
    }
  }
  &.is-large{
    .ui-chart-quota-item__label {
      height: 24px;
      line-height: 24px;
    }
    .ui-chart-quota-item__target{
      font-size: 22px;
      height: 32px;
      line-height: 32px;
    }
  }
  &.is-small{
    .ui-chart-quota-item__label {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
    }
    .ui-chart-quota-item__target{
      font-size: 18px;
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
